<script setup>
const props = defineProps({
  modelValue: {
    type: [String, Number],
  },
  placeholder: {
    type: String,
    default: "",
  },
  min: {
    type: Number,
    default: 0,
  },
  max: {
    type: Number,
    default: Infinity,
  },
  precision: {
    type: Number,
    default: 2,
  },
  unit: {
    type: String,
    default: "元",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: "default",
  },
});
const emits = defineEmits(["update:modelValue", "change"]);

const onChange = (val) => {
  emits("update:modelValue", val);
  emits("change", val);
};
</script>
<template>
  <div class="input-container">
    <el-input-number :model-value="modelValue" :min="min" :max="max" controls-position="right" :precision="precision"
      :placeholder="placeholder" :disabled="disabled" :size="size" @change="onChange"></el-input-number>
    <div class="unit" v-show="unit">{{ unit }}</div>
  </div>
</template>
<style lang="scss" scoped>
.input-container {
  display: flex;

  .unit {
    padding: 0 20px;
    text-align: center;
    align-items: center;
    color: #909399;
    background-color: #f5f7fa;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #dcdfe6;
    border-left: 0;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
  }

  .el-input-number--small {
    &+.unit {
      padding: 0 10px;
    }
  }
}

.el-input-number {

  //   line-height: 32px;
  //   width: 200px;
  &.is-controls-right {
    :deep(.el-input__wrapper) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      padding-right: 15px;

      .el-input__inner {
        text-align: left;
      }
    }

    :deep(.el-input-number__increase) {
      display: none;
    }

    :deep(.el-input-number__decrease) {
      display: none;
    }
  }
}
</style>
